<template>
    <div class="customer">
        <div class="item">
            <text class="text">旧密码:</text>
            <div>
                <input :style="{height: showHeight}" class="input" type="text" v-model="oldPassword"  />
                <input :style="{height: hideHeight}" class="inputs" type="password" v-model="oldPassword"  />  
            </div>
            <text class="icon" :style="{fontFamily: 'wxcIconFont'}" :class="[activeIndex ? 'active'  : '']" @click="isShow">{{'\ue666'}}</text>
        </div>
        <div class="itemTop">
            <text class="textTop">若包含字母，请注意区分大小写</text>
        </div>
        <div class="item">
            <text class="text">新密码:</text>
            <div>
                <input :style="{height: showNewHeight}" class="input" type="text" v-model="newValue" />
                <input :style="{height: hideNewHeight}" class="inputs" type="password" v-model="newValue" />
            </div>
            <text class="icon" :style="{fontFamily: 'wxcIconFont'}" :class="[ShowNew ? 'active'  : '']" @click="isShowNew">{{'\ue666'}}</text>
        </div>
        <div class="itemTop">
            <text class="textTop">8-16位，至少含数字/字母/字符两种组合</text>
        </div>
        <div class="item">
            <text class="text">再次确认:</text>
            <div>
                <input :style="{height: showAginHeight}" class="input" type="text" v-model="newVal" />
                <input :style="{height: hideAginHeight}" class="inputs" type="password" v-model="newVal" />
            </div>
            <text class="icon" :style="{fontFamily: 'wxcIconFont'}" :class="[agin ? 'active'  : '']" @click="isNewVal">{{'\ue666'}}</text>
        </div>
        <div class="itemTop">
            <text class="textTop">请再一次输入新密码</text>
        </div>
        <div class="itemBtn">
            <div class="btn" @click="submitBtn">
                <text class="btnText">确认修改</text>
            </div>
        </div>
        <wxc-mask width="500"
              height= '400'
              border-radius="0"
              duration="300"
              mask-bg-color="#FFFFFF"
              :overlay-can-close="true"
              :has-overlay="true"
              :show="showTitle"
              @wxcMaskSetHidden="wxcMaskSetHidden">
              <text class="mark">{{title}}</text>
          </wxc-mask>
    </div>
</template>
<script>
import { addIconFontSupport, getIconFontPath } from '../../config/iconConfig.js';
import event from '../../net/event'
import { getCache } from '../../util/storageUtils'
import { CTCE_USER_BASIC } from '../../config/storageTypes'
import wxcMask from 'weex-ui/packages/wxc-mask'
const dom = weex.requireModule('dom');
export default {
    name: 'customer',
    data () {
        return {
            pwd: '',
            show: false,
            isChecked: false,
            showTitle: false,
            title: '',
            activeIndex: false,
            ShowNew: false,
            agin: false,
            showHeight: 1,
            hideHeight: 100,
            showNewHeight: 1,
            hideNewHeight: 100,
            showAginHeight: 1,
            hideAginHeight: 100
        }
    },
    components:{
        wxcMask
    },
    beforeCreate () {
      this.$notice.loading.show()
      this.$navigator.setLeftItem({
            text: '   ',
            fontSize: '40',
            fontWeight: 'bold'
        }, () => {
            this.$router.back()
        })
    },
    created () {
        getCache(CTCE_USER_BASIC).then(res => {
            const user = JSON.parse(res)
            this.pwd = user.password
        })
        addIconFontSupport(dom, "../../")
    },
    mounted() {
      this.$notice.loading.hide()
    },
    methods: {
        submitBtn() {
            if(this.oldPassword != '' && this.oldPassword === this.pwd && this.newValue != '' && this.newVal != '' && this.newVal === this.newValue) {
                event.changePassword(this.oldPassword, this.newValue, this.newVal).then(res => {
                    this.showTitle = true
                    this.title = '密码修改成功'
                    setTimeout(() => {
                        this.showTitle = false
                        this.$router.back()
                    }, 800)
                })
            } else {
                this.showTitle = true
                this.title = '信息填写不正确'
                setTimeout(() => {
                    this.showTitle = false
                }, 800)
            }
        },
        isShow () {
            if (this.activeIndex) {
                this.activeIndex = false
                this.showHeight = 1
                this.hideHeight = 100
            } else {
                this.activeIndex = true
                this.showHeight = 100
                this.hideHeight = 1
            }
            
        },
        isShowNew () {
            if (this.ShowNew) {
                this.ShowNew = false
                this.showNewHeight = 1
                this.hideNewHeight = 100
            } else {
                this.ShowNew = true
                this.showNewHeight = 100
                this.hideNewHeight = 1
            }
        },
        isNewVal () {
            if (this.agin) {
                this.agin = false
                this.showAginHeight = 1
                this.hideAginHeight = 100
            } else {
                this.agin = true
                this.showAginHeight = 100
                this.hideAginHeight = 1
            }
        },
        wxcMaskSetHidden() {
            this.showTitle = false
        },
        wxcDialogConfirmBtnClicked() {
            this.show = false
        }
    }
}
</script>
<style scoped>
.customer{
    width: 750px;
    flex: 1;
}
.item{
    width: 750px;
    height: 100px;
    background-color: #fff;
    padding: 0 40px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.itemTop{
    width: 750px;
    height: 80px;
    padding: 0 40px;
    background-color: #eee;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.input{
    width: 440px;
    height: 100px;
}
.inputs{
    width: 440px;
    height: 100px;
}
.icon{
    display: block;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    color: #f5f5f5;
    font-size: 40px;
    
}
.active{
    color: rgba(176,248,212,1);
}
.text{
    font-size:29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(102,102,102,1);
}
.textTop{
    font-size:29.1px;
    font-family:PingFangSC-Regular;
    color:rgba(204,204,204,1);
}
.itemBtn{
    width: 750px;
    flex: 1;
    background-color: #fff;
    padding: 0 40px;
    flex-direction: row;
    justify-content: space-between;
}
.btn{
    width: 670px;
    height: 80px;
    background-color: rgba(35,196,160,1);
    border-radius:12px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.btnText{
    font-size:33px;
    font-family:PingFangSC-Regular;
    color:rgba(255,255,255,1);
}
.dialog{
    font-size: 29px;
}
.mark{
    display: block;
    width: 500px;
    height: 400px;
    line-height: 400px;
    text-align: center;
}
</style>
